<template>
  <div id="TabControl">
     <div v-for="(i,index) in titles" :key="index" class="TabControl-item" :class="{active: index==currentIndex}" @click="changeActive(i,index)">
         <span>{{i}}</span>
     </div>
  </div>
</template>

<script>
export default {
  name: 'TabControl',
  data () {
   return {
       currentIndex: 0,
   }
  },
  methods:{
      changeActive(i,index){
          this.currentIndex=index;
          this.$emit("tabClick",{i: i,index: index})
      },
      
  },
  props: {
      titles: {
          type: Array,
          default(){
              return [];
          }
      }
  }
}
</script>

<style scoped>
  #TabControl{
      display: flex;
      text-align: center;
      font-size: 15px;
      height: 40px;

      line-height: 40px;
      background: #fff;
    
  }

  .TabControl-item{
      flex: 1;
      
  }

  .active span{
      color: var(--color-high-text);
      border-bottom: 3px solid var(--color-tint);
      padding: 5px 5px;
  }


</style>